<!DOCTYPE html>
<html>
<head>

    <title>Namespaces demo chat</title>
    <link href="bootstrap.css" rel="stylesheet">

    <style>
        body {padding:20px;}
        .console {height: 400px ; overflow: auto;}
        .username-msg {color:orange;}
        .connect-msg {color:green;}
        .disconnect-msg {color:red;}
        .send-msg {color:#888}
    </style>


    <script src="js/socket.io/socket.io.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script>
        var userName1 = 'user1_' + Math.floor((Math.random()*1000)+1);
        var userName2 = 'user2_' + Math.floor((Math.random()*1000)+1);

        var chat1Socket =  io.connect('http://localhost:9092/chat1');
        var chat2Socket =  io.connect('http://localhost:9092/chat2');

        function connectHandler(parentId) {
            return function() {
                output('<span class="connect-msg">Client has connected to the server!</span>', parentId);
            }
        }

        function messageHandler(parentId) {
            return function(data) {
                output('<span class="username-msg">' + data.userName + ':</span> ' + data.message, parentId);
            }
        }


        function disconnectHandler(parentId) {
            return function() {
                output('<span class="disconnect-msg">The client has disconnected!</span>', parentId);
            }
        }

        function sendMessageHandler(parentId, userName, chatSocket) {
            var message = $(parentId + ' .msg').val();
            $(parentId + ' .msg').val('');

            var jsonObject = {'@class': 'com.corundumstudio.socketio.demo.ChatObject',
                userName: userName,
                message: message};
            chatSocket.json.send(jsonObject);
        }


        chat1Socket.on('connect', connectHandler('#chat1'));
        chat2Socket.on('connect', connectHandler('#chat2'));

        chat1Socket.on('message', messageHandler('#chat1'));
        chat1Socket.on('message', messageHandler('#chat2'));
        chat2Socket.on('message', messageHandler('#chat1'));
        chat2Socket.on('message', messageHandler('#chat2'));



        chat1Socket.on('disconnect', disconnectHandler('#chat1'));
        chat2Socket.on('disconnect', disconnectHandler('#chat2'));

        function sendDisconnect1() {  chat1Socket.disconnect(); }
        function sendDisconnect2() {  chat2Socket.disconnect(); }

        function sendMessage1() { sendMessageHandler('#chat1', userName1, chat1Socket);}
        function sendMessage2() { sendMessageHandler('#chat2', userName2, chat2Socket);}

        function output(message, parentId) {
            var currentTime = "<span class='time'>" +  moment().format('HH:mm:ss.SSS') + "</span>";
            var element = $("<div>" + currentTime + " " + message + "</div>");
            $(parentId + ' .console').prepend(element);
        }

        $(document).keydown(function(e){
            if(e.keyCode == 13) {
                var msg1 = $('#chat1' + ' .msg').val();
                var msg2 = $('#chat2' + ' .msg').val();
                if( '' != msg1 ){$('#send1').click();}
                if( '' != msg2 ){$('#send2').click();}
            }
        });
    </script>
</head>

<body>

<h1>Namespaces demo chat</h1>

<br/>

<div id="chat1" style="width: 49%; float: left;">
    <h4>chat1</h4>
    <div class="console well"> </div>

    <form class="well form-inline" onsubmit="return false;">
        <input class="msg input-xlarge" type="text" placeholder="Type something..."/>
        <button type="button" onClick="sendMessage1()" class="btn" id="send1">Send</button>
        <button type="button" onClick="sendDisconnect1()" class="btn">Disconnect</button>
    </form>
</div>

<div id="chat2" style="width: 49%; float: right;" >
    <h4>chat2</h4>
    <div class="console well"></div>

    <form class="well form-inline" onsubmit="return false;">
        <input class="msg input-xlarge" type="text" placeholder="Type something..."/>
        <button type="button" onClick="sendMessage2()" class="btn" id="send2">Send</button>
        <button type="button" onClick="sendDisconnect2()" class="btn">Disconnect</button>
    </form>
</div>
</body>

</html>
